<!DOCTYPE html><!-- simplified doctype works for all previous versions of HTML as well -->

<!-- Paul Irish's technique for targeting IE, modified to only target IE6, applied to the html element instead of body -->
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"><![endif]-->
<!--[if (gt IE 6)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <title>CSS3 Text</title>
  <meta name="description" content="HTML5 template" />
  <meta name="author" content="Roger Xu" />

  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- CSS: implied media="all" -->
  <link rel="stylesheet" href="../css/style.css?v=2">

  <!-- Uncomment if you are specifically targeting less enabled mobile browsers
  <link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">  -->

  <style>
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/resources/dojo.css";
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/claro/claro.css";
  </style>

  <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
  <script src="../script/modernizr-1.7.min.js"></script>

  <style>
    .code {
        font-family: "Consolas", "Lucida Console", "Courier New";
    }

    .iconLabel {
        display: inline-block;
        margin-right: 2px;
        width: 1.8em;
        height: 1.8em;
        line-height: 1.8em;
        text-align: center;
        font-family: "Georgia";
        font-weight: bold;
        background-color: #ccc;
    }

    .iconM {
        background-color: #FFCC33;
    }

    .iconC {
        background-color: #33CCFF;
    }

    .iconL {
        background-color: #66FF33;
    }
  </style>
</head>
<body class="claro">

  <!-- First header has an ID so you can give it individual styles, and target stuff inside it -->
  <header id="hd1">
    <!-- "hgroup" is used to make two headings into one, to prevent a new document node from forming -->
    <hgroup>
      <h1>A Preview of HTML 5</h1>
      <h2 id="version">Unknown Version</h2>
    </hgroup>

    <!-- Main nav, styled by targeting "#hd1 nav"; you can have more than one nav element per page -->
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header><!-- #hd1 -->

  <!-- This is the main "div" that wraps the content generically; don't use "section" for this -->
  <article id="main">

    <!-- The first of two "section" elements for demo purposes; optional class added for styling (hs1 = "home section 1") -->
    <section class="hs1">
    <!-- Each section should begin with a new h1 (not h2), and optionally a header -->
    <!-- You can have more than one header/footer pair on a page -->
      <header>
        <h1>Chapter 1: The Icons</h1>
      </header>

      <p>
        <span class="iconLabel">D</span> Default icon<br />
        <span class="iconLabel iconM">M</span> M icon<br />
        <span class="iconLabel iconC">C</span> C icon<br />
        <span class="iconLabel iconL">L</span> L icon<br />
      </p>

      <!-- The h2 below is a sub heading relative to the h1 in this section, not for the whole document -->
      <h2>Demonstrating EM and STRONG</h2>

      <!-- "strong" is used for SEO and contextual hierarchy -->
      <p><strong>This text will have more importance (SEO-wise and contextually)</strong></p>

      <!-- "b" is used for stylistic offset of text that's NOT important contextually -->
      <p><b>This text has visual importance but has no contextual or SEO importance</b></p>

      <!-- "em" is used for colloquial-style emphasis -->
      <p>This is a <em>very</em> colloquial expression.</p>

      <!-- There can be multiple footers on each page -->
      <!-- Secondary headers and footers don't necesarily need ids; they can be targeted via context (i.e. ".hs1 footer") -->
      <footer>
        <!-- incite a riot: http://24ways.org/2009/incite-a-riot -->
        <p>Author: <cite>Louis Lazaris</cite></p>
      </footer>

    </section><!-- .hs1 -->

    <!-- This is another section; doesn't have header/footer because it's not required -->
    <section class="hs2">
      <h1>This is another section</h1>
    </section><!-- .hs2 -->

  </article><!-- #main -->

  <!-- The "aside" element could be a sidebar (outside an article or section) -->
  <!-- Or it could reference other tangentially-related content within an article or section -->
  <aside>
    <h1>Archives</h1>
    <ul>
      <li><a href="/2007/09/">September 2007</a></li>
      <li><a href="/2007/08/">August 2007</a></li>
      <li><a href="/2007/07/">July 2007</a></li>
    </ul>
  </aside>

  <!-- The main footer has an ID for targeting, similar to the main header -->
  <footer id="f1">
    <p>copyright &copy; 2011</p>
  </footer><!-- #f1 -->

<!-- JavaScript at the bottom for fast page loading -->

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config='parseOnLoad: true, isDebug: true, locale: "en"'></script>
<script>
    dojo.require("dojo.date.locale");
    dojo.require("dojo.parser");

    dojo.require("dijit.dijit"); // optimize: load dijit layer
</script>

<!-- scripts concatenated and minified via ant build script-->
<script>

</script>

<!-- dojo ready -->
<script>
dojo.ready(function() {
    dojo.byId('version').innerHTML = 'Version ' + dojo.version;
});
</script>

  <!-- end scripts-->

  <!--[if lt IE 7 ]>
    <script src="js/libs/dd_belatedpng.js"></script>
    <script>DD_belatedPNG.fix("img, .png_bg"); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb </script>
  <![endif]-->

</body>
</html>
